import React from 'react';
import { inject, observer } from 'mobx-react';

import E9TopLogo from '../E9TopLogo';
import E9QuickSearch from '../E9QuickSearch';
import E9Home from './E9Home';
import E9HeaderRight from '../E9HeaderRight';

@inject('portalThemeStore')
@observer
class E9Header extends React.Component {
    componentDidUpdate() {
        const desklogo = $('.e9header-top-logo').width();
        const deskrleft = $('.e9header-home').width() + $('.e9header-quick-search').width() + 10;
        const deskrright = $('.e9header-right-toolbar').width();
        const deskwid = desklogo + deskrleft + deskrright + 50;
        $('.e9layout-desktop-container').css({ 'min-width': `${deskwid}px` });
    }

    render() {
        return (
            <div className="e9header-container" style={{ color: '#fff' }}>
                <div style={{ float: 'left' }}>
                    <div style={{ float: 'left' }}>
                        <E9TopLogo ecId={`${this && this.props && this.props.ecId || ''}_E9TopLogo@55amqw`} {...this.props} />
                    </div>
                    <div style={{ float: 'right' }}>
                        <E9Home ecId={`${this && this.props && this.props.ecId || ''}_E9Home@pt1t6v`} {...this.props} />
                        <E9QuickSearch ecId={`${this && this.props && this.props.ecId || ''}_E9QuickSearch@xxn6j5`} {...this.props} />
                    </div>
                    <div style={{ clear: 'both' }} />
                </div>
                <div style={{ float: 'right' }}>
                    <E9HeaderRight ecId={`${this && this.props && this.props.ecId || ''}_E9HeaderRight@y9iopb`} {...this.props} />
                </div>
            </div>
        );
    }
}

export default E9Header;
